<template>
  <el-container class="home-container">
    <el-header class="el-header">
      <TopBar />
    </el-header>
    <el-container class="el-container">
      <el-aside width="200px">
        <LeftBar />
      </el-aside>
      <el-main>
        <div>
          <input type="file" @change="handleFileUpload" accept=".png,.txt">
          <button @click="submitFile">Submit</button>
          <div v-if="prediction">
            <h2>Prediction: {{ prediction }}</h2>
            <h3>Probability Distribution:</h3>
            <div v-for="(prob, label) in probability" :key="label">
              <p>{{ label }}: {{ prob }}</p>
              <div :style="{ width: prob * 100 + '%' }"></div>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import axios from 'axios'
import TopBar from '@/components/TopBar'
import LeftBar from '@/components/LeftBar'

export default {
  name: 'ReImage',
  components: { TopBar, LeftBar },
  data () {
    return {
      file: null,
      prediction: null,
      probability: null
    }
  },
  methods: {
    handleFileUpload (event) {
      this.file = event.target.files[0]
    },
    submitFile () {
      const formData = new FormData()
      formData.append('file', this.file)
      axios.post('http://your-python-server.com/predict', formData)
        .then(response => {
          this.prediction = response.data.prediction
          this.probability = response.data.probability
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}
</script>
<style scoped>
.el-header {
  padding: 0;
}
</style>
